<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%"
  >
    <template slot="title">
      <div style="width: 100%">
        <span>{{ title }}</span>
        <span style="display: inline-block; width: calc(100% - 51px); padding-right: 10px; text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height: 20px; width: 20px; border: 0px"></a-button>
        </span>
      </div>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model">
        <a-form-model-item label="活动名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
          <a-input placeholder="请输入活动名称" v-model="model.title" />
        </a-form-model-item>

        <a-form-model-item label="活动内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="actName">
          <a-input placeholder="请输入活动内容" v-model="model.actName" />
        </a-form-model-item>

        <a-form-model-item label="价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">
          <a-input placeholder="请输入价格" v-model="model.price" />
        </a-form-model-item>

        <a-form-model-item label="活动状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
          <a-select v-model="model.status" placeholder="请选择基地">
            <a-select-option v-for="(item, index) in dictOptions" :key="index.toString()" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="是否svip" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="menberLevel">
          <a-select v-model="model.menberLevel" placeholder="请选择会员等级">
            <a-select-option v-for="(item, index) in menberLevels" :key="index.toString()" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>


        <a-form-model-item label="需要提前支付" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
          <a-select v-model="model.needPay" placeholder="请选择">
             <a-select-option value="1">需要</a-select-option>
            <a-select-option value="0">不需要</a-select-option>
          </a-select>
        </a-form-model-item>


         <a-form-model-item label="活动类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classify">
          <a-select v-model="model.classify" placeholder="请选择活动类型">
            <a-select-option v-for="(item, index) in actTypeOptions" :key="index.toString()" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <!-- <a-form-model-item label="可预约天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deadline">
          <a-input-number :min="1" v-model="model.deadline" />
        </a-form-model-item> -->

        <a-form-model-item label="是否订购保险" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
          <a-select v-model="model.insurance" placeholder="请选择">
            <a-select-option value="0">不需要</a-select-option>
            <a-select-option v-for="(item, index) in insuranceOptions" :key="index.toString()" :value="item.id">
              {{ item.insuranceName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="活动开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-date-picker
            style="width: 100%"
            placeholder="请选择活动开始时间"
            v-model="model.startDay"
            :format="dateFormat"
            :getCalendarContainer="(node) => node.parentNode"
          />
        </a-form-model-item>

        <a-form-model-item label="活动结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-date-picker
            style="width: 100%"
            placeholder="请选择活动结束时间"
            v-model="model.endDay"
            :format="dateFormat"
            :getCalendarContainer="(node) => node.parentNode"
          />
        </a-form-model-item>

        <a-form-model-item label="基地" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shopId">
          <!-- <a-input placeholder="请选择基地" v-model="model.shopId" /> -->

          <a-select v-model="model.shopId" @change="baseChange" placeholder="请选择基地" :getPopupContainer= "(target) => target.parentNode" >
            <a-select-option v-for="(item, index) in baseOptions" :key="index.toString()" :value="item.id">
              {{ item.shopName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <!-- <a-form-model-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
          <a-input disabled="true" placeholder="请输入地址" v-model="model.address" />
        </a-form-model-item> -->

        <a-form-model-item label="活动主图" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <j-image-upload text="上传" v-model="model.mainPic" :isMultiple="false"></j-image-upload>
        </a-form-model-item>

        <a-form-model-item label="活动图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <j-image-upload text="上传" v-model="model.images" :isMultiple="true"></j-image-upload>
        </a-form-model-item>

        <a-form-model-item
          label="图文内容"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          style="min-height: 300px"
          prop="imageText"
        >
          <j-editor v-model="model.imageText" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>

    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: 0.8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { getAction } from '@/api/manage'
import { addActivity, editActivity, ajaxGetDictItems,getAllInsurance } from '@api/api'

export default {
  name: 'UserModal',
  components: {},
  data() {
    return {
      baseOptions: [],
      actTypeOptions:[],
      insuranceOptions:[],
      dictOptions:[],
      menberLevels:[],
      fetching:false,
      modalWidth: 800,
      drawerWidth: 700,
      modaltoggleFlag: true,
      confirmDirty: false,
      disableSubmit: false,
      dateFormat: 'YYYY-MM-DD',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
    }
  },
  created() {
    this.getBase()
    this.getDictItem()
    this.getActType()
    this.getInsurance()
    this.getMenberLevels()
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
    this.model.needPay=this.modelDefault.needPay+"";
  },
  computed: {},
  methods: {
    getDictItem() {
      //根据字典Code, 初始化字典数组
      ajaxGetDictItems('activity_status', null).then((res) => {
        if (res.code === 20000) {
          this.dictOptions = res.data
        }
      })
    },
    getMenberLevels(){
      //根据字典Code, 初始化字典数组
      ajaxGetDictItems('member_level', null).then((res) => {
        if (res.code === 20000) {
          this.menberLevels = res.data;
        }
      })
    },
    getActType(){
        //根据字典Code, 初始化字典数组
      ajaxGetDictItems('activity_classify', null).then((res) => {
        if (res.code === 20000) {
          this.actTypeOptions = res.data
        }
      })
    },
    getInsurance(){
        getAllInsurance().then(res=>{
          this.insuranceOptions=res.data;
        })
    },
    baseChange(v) {
      const baseInfo = this.baseOptions.filter((i) => i.id === v)
      const base = baseInfo[0]
      this.model.address = base.adress
      this.model.city = base.city
    },
    getBase() {
      let url = '/wx/shop/getAll'
      getAction(url).then((res) => {
        if (res.code === 20000) {
          this.baseOptions = res.data
          console.log(this.baseOptions)
        }
      })
    },
    add() {
      let that = this
      that.visible = true
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize()
      this.edit(this.modelDefault)
    },
    edit(record) {
      let that = this
      that.visible = true;
      console.log('record..',record)
      this.model = Object.assign({}, this.defaultModel, record);
      this.model.status=this.model.status.toString();
      this.model.needPay=this.model.needPay.toString();
      this.model.menberLevel=this.model.menberLevel.toString();
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize()
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    },
    refresh() {},
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.$refs.form.resetFields()
    },
    handleSubmit() {
      const that = this
      const params = that.model
      let obj
      if (!that.model.id) {
        obj = addActivity(params)
      } else {
        obj = editActivity(params)
      }
      obj.then((res) => {
        if (res.code === 20000) {
          that.$message.success('添加成功！')
          that.close()
          that.$emit('ok')
        } else {
          that.$message.warning('添加失败！')
          that.close()
        }
      })
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

/*【JTC-502】 添加用户两个滚动条*/
/deep/ .ant-drawer-body {
  padding-bottom: 53px;
}
</style>
